<template>
  <div class="about">
    <van-nav-bar title="需求清单" left-text="返回" @click-left="onClickLeft" />
    <div class="goodshop_img">
   <van-image
  width="100"
  height="100"
  src="//img.yaofang.cn/mobile/shopping80.png"
/>
    </div>
    <div class="goodshop_p">
      <p>需求清单空空如也，快去逛逛吧</p>
    </div>
    <div>
      <van-button color="#4990e0" to="/">去逛逛</van-button>
    </div>
      <!-- 好货推荐 -->
    <div class="hhtj">
      <div class="title_hhtj">
        <van-icon name="hot-o" color="#a54ff5" size="20"/>
        <span class="span">精心推荐</span>
        </div>
      <van-list>
        <van-cell v-for="item in list" :key="item" :title="item" />
        <van-grid :column-num="2" :border="true">
          <van-grid-item v-for="(item,index) in goodsList" :key="index" :text="item.goods_name">
            <van-image :src="item.list_image" width="115" height="96"></van-image>
           <div class="goodslist_text">
              {{item.list_text}}
           </div>
            <span style="color:red" class="goodslist_span">{{item.list_qian}}</span>
          </van-grid-item>
        </van-grid>
      </van-list>
    </div>
    <!-- 底部标签栏 -->
    <div>
      <van-tabbar route>
        <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="apps-o" to="/classify">分类</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o" to="/goshop">购物车</van-tabbar-item>
        <van-tabbar-item icon="contact" to="/me">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      goodsList: []
    }
  },
  methods: {
    // 点击返回按钮  返回到首页
    onClickLeft () {
      this.$router.push('/')
    }
  },
  created () {
    // 好货推荐列表
    this.$http.get('/list_goods').then(res => {
      // console.log(res)
      this.goodsList = res.data.data
    })
  }
}
</script>

<style scoped>
.van-nav-bar {
  background-color: #4990e0;
}
.van-nav-bar__text{
  color: #ffffff;
}
.van-nav-bar__title {
  color: #ffffff;
}
.goodshop_img{
  margin-top: 75px;
}
.title_hhtj{
  font-size: 12px;
  background-color: #f0f0f0;
  margin-top: 50px;
}
.van-image__img{
  width: 100px;
  height: 85px;
}
.goodshop_p{
  font-size: 14px;
  color: #999;
}
.van-checkbox__label {
  margin-left: 8px;
  color: #323233;
  line-height: 20px;
  width: 360px;
}
.van-tag--large {
  font-size: 14px;
  position: relative;
  top: 30px;
  left: -20px;
}
.van-submit-bar__text span {
  width: 140px;
  display: inline-block;
  height: 20px;
}
.van-submit-bar__button {
  width: 300px;
}
.van-submit-bar {
  bottom: 50px;
}
</style>
